<template>
  <n-layout has-sider>
    <n-layout-sider default-collapsed :show-collapsed-content="false" collapse-mode="transform" :collapsed-width="0"
      :width="220" show-trigger="bar" class="sidebar-css" bordered>
      <div class="avatar-css">
        <n-avatar round :size="96" :src="imageSrc" />
      </div>
    </n-layout-sider>
    <n-scrollbar style="max-height: 120vh">

      <n-layout-content content-style="padding-top: 24px; " class="content-css" :native-scrollbar="true">
        <div v-if="showList">
        <n-grid :x-gap="1" :y-gap="80" :cols="1" item-responsive>
          <n-grid-item v-for="item in articles" :key="item.id" style="  padding:0 10px ;">
               <n-card  hoverable class="title-card"  size="huge"   @click="getArticle(item)" >
                 <span class="p-title"> <span style="font-size: 25px;"> {{ formatTime(item.update_time) }} &nbsp;&nbsp;</span><span style="font-size: 35px;"> {{ item.title }}</span></span>    
                 <p style="font-size: 20px;">{{ item.type_name }}--{{ item.author }}</p>
                 <p style="font-size: 20px;">点击进入详细</p>
              </n-card>
          </n-grid-item>
        </n-grid>
      </div>
          <div v-else class="detail-container"  >
            <n-card class="detail-card" size="large"  >
              <n-float-button :right="300" :bottom="600" shape="square" @click="showList = true" style="background:#f08d00">
                <n-icon>
                  <CaretBackCircle />
                </n-icon>
                <template #description>
                  返回
                </template>
              </n-float-button>
              <template #header>
                <div class="detail-header" style="  font-family: 'Ma Shan Zheng', sans-serif; ">
                  <span style="font-size:40px"> <b>{{ selectedArticle.title }}</b></span>
                  <p>{{ formatTime(selectedArticle.update_time) }}--{{ selectedArticle.type_name }}--{{ selectedArticle.author }}</p>
                </div>
              </template>
              <div class="detail-content">
                <p v-html="selectedArticle.content"></p>
              </div>
            </n-card>
          </div>
      </n-layout-content>
    </n-scrollbar>
  </n-layout>
</template>

<script setup>
import { ref, onMounted , watch} from "vue";
import qs from "qs";
import requestUtil from "../../../../utils/request";
import imageSrc from "../../../../assets/images/shine.jpg";
import { useMessage } from "naive-ui";
import dayjs from "dayjs";
import store from "../../../../store";
import { CaretBackCircle } from "@vicons/ionicons5"; //


const message = useMessage(); // 初始化 message
const articles = ref([]);
// 控制列表显示/隐藏的状态（默认显示列表）
const showList = ref(true);
// 存储选中的文章详情（初始为null）
const selectedArticle = ref(null);

const selectedTypeId = ref(store.state.selectedTypeId); // 初始值为 null
// 监听 Vuex 中 selectedTypeId 的变化
watch(
  () => store.state.selectedTypeId,
  (newVal) => {
    selectedTypeId.value = newVal;
    getArticleList(); // 当分类ID变化时重新获取文章列表
  }
);
// 获取文章列表
const getArticleList = async () => {
   let params = {
      is_active: "true"
    };
    // 如果有选中的分类ID，添加到请求参数
    if (selectedTypeId.value) {
      params.type_id = selectedTypeId.value;
    }
  try {
    let result = await requestUtil.post(
      "article/selectAll?",
      qs.stringify(params)
    );
    if (result.data.code === 200) {
      articles.value = result.data.articleList
    } else {
      message.error("数据加载失败：" + data.info);
    }
  } catch (error) {
    message.error("请求失败：" + error.message);
  }
};

// 获取文章详情
const getArticle = async (data) => {
  showList.value = false;       // 隐藏列表
  selectedArticle.value = data; // 存储选中文章数据
}
//时间格式
const formatTime= (time)=> {
      return dayjs(time).format('YYYY年MM月DD日')
}


// 页面加载时加载类型列表
onMounted(() => {
  getArticleList();
});
</script>

<style scoped lang="scss">
.sidebar-css {
  background: linear-gradient(to bottom, #F2E1B3, #D4A76A);
}

.sidebar-css:hover .gov {
  opacity: 1;
}

.content-css {
  min-height: 100vh;
  background: linear-gradient(to bottom, #F2E1B3, #D4A76A);
}

.avatar-css {
  position: relative;
  top: 10px;
}

.title-card {
  background: #e4d8b6;
  min-height:150px;
  border: rgba(0, 0, 0, 0.24) solid 2px;
  font-family: "Ma Shan Zheng", sans-serif; 
}
.title-card:hover {
  background: #D4A76A;
  border: rgba(0, 0, 0, 0.24) solid 2px;
  cursor: pointer; 
}
.p-title:hover {
  background: #D4A76A;
  color: #ec0606;
  text-decoration: underline dotted; 
}
.detail-card{
  background: linear-gradient(to bottom, #F2E1B3, #D4A76A);
  border:  #f3dea4 solid 1px;
}
</style>